<template>
  <el-card class="box-card">
    <h2 class="titleHeader">
      修改前端个人信息页
    </h2>

    <div class="frontHome">
      <el-form label-position="left" label-width="70px" :model="frontCenterForm" @submit.native.prevent>

        <el-form-item label="电 话">
          <el-input v-model="frontCenterForm.tel" />
        </el-form-item>

        <el-form-item label="微 信">
          <el-input v-model="frontCenterForm.wechat"></el-input>
        </el-form-item>

        <el-form-item label="Q  Q">
          <el-input v-model="frontCenterForm.qq"></el-input>
        </el-form-item>

        <el-form-item label="昵 称">
          <el-input v-model="frontCenterForm.uname"></el-input>
        </el-form-item>

        <el-form-item label="摘 录">
          <el-input v-model="frontCenterForm.motto"></el-input>
        </el-form-item>
        <el-form-item label="位 置">
          <center-map v-if="frontCenterForm.location" @addressData="addressData" :latitude="latitude"
            :longitude="longitude"></center-map>
        </el-form-item>

        <el-form-item>
          <div style="text-align: right; width: 100%;">
            <button @click="onSubmit" class="submitBtn">
              修 改
            </button>
          </div>
        </el-form-item>

      </el-form>
    </div>
  </el-card>
</template>

<script lang="ts" setup>

import { reactive, defineAsyncComponent, ref } from 'vue'

import { getFrontCenter, updateFrontCenter } from '@/utils/frontHome'

import { ElMessage } from 'element-plus'

const CenterMap = defineAsyncComponent(() => import('@/components/map/CenterMap.vue'));

const frontCenterForm = reactive({
  tel: '',
  wechat: '',
  qq: '',
  uname: '',
  motto: '',
  location: '',
})

const latitude = ref('40.083402')
const longitude = ref('113.368374')

const onSubmit = () => {
  if (!Object.values(frontCenterForm).every((value) => value)) return ElMessage.error('不能存在空值')
  updateFrontCenter(frontCenterForm.tel, frontCenterForm.wechat, frontCenterForm.qq, frontCenterForm.motto, frontCenterForm.uname, frontCenterForm.location).then(res => {
    if (res.data.ok) {
      ElMessage.success(res.data.info)
    } else {
      ElMessage.error(res.data.info)
    }
  }).catch(err => ElMessage.error('服务器错误请检查token'))
}
// 获取数据
getFrontCenter().then(res => {
  frontCenterForm.tel = res.data.info[0].tel
  frontCenterForm.wechat = res.data.info[0].wechat
  frontCenterForm.qq = res.data.info[0].qq
  frontCenterForm.uname = res.data.info[0].uname
  frontCenterForm.motto = res.data.info[0].motto
  latitude.value = (res.data.info[0].location as string).split(',')[1]
  longitude.value = (res.data.info[0].location as string).split(',')[0]
  frontCenterForm.location = res.data.info[0].location
})

// 地图返回数据
const addressData = ({ lng, lat }: any) => {
  // 给表单传入进去
  frontCenterForm.location = `${lng},${lat}`
}
</script>

<style lang="scss" scoped>
.frontHome {
  width: 80%;
  padding: 30px;
  margin: 20px auto;
}

.submitBtn {
  font-size: 14px;
  padding: 8px 20px;
  border: transparent;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  background: dodgerblue;
  color: white;
  border-radius: 5px;

  &:hover {
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(30, 144, 255, 1) 0%, rgba(0, 212, 255, 1) 100%);
  }

  &:active {
    transform: translate(0em, 0.2em);
  }
}
</style>